<template>
	<!-- 消息页 -->
	<view class="content">
		<!-- 系统通知 -->
		<view class="messageFrame" style="background-color: #F3F7F8;" @click="toSystemMessage">
			<image src="/static/img/message/systemMessage@2x.png" mode="scaleToFill"></image>
			<view class="message">
				<view class="left">
					<span>系统通知</span>
					<span>暂无通知</span>
				</view>
				<view class="right">
					<view>今天11:33</view>
					<span>99+</span>
				</view>
			</view>
		</view>
		<!-- 在线客服 -->
		<view class="messageFrame" style="background-color: #F3F7F8;" @click="toChatRoom('在线客服')">
			<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-1140996165e34c47f1586e7e34a74e84_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663918149&t=51304ecefb44a5847249219c9d95fadc" mode="scaleToFill"></image>
			<view class="message">
				<view class="left">
					<span>在线客服</span>
					<span>在线客服</span>
				</view>
				<view class="right">
					<view>今天11:33</view>
					<span>99+</span>
				</view>
			</view>
		</view>
		
		<!-- 消息 -->
		<uni-swipe-action>
			<!-- 置顶列表 -->
			<uni-swipe-action-item :right-options="options2" v-for="item,index in messageList"
			 :key="index" @click="bindClick1(item.ID,$event)">
				<view class="messageFrame" style="background-color: #F3F7F8;" 
				@click="toChatRoom(item.ID)">
					<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-1140996165e34c47f1586e7e34a74e84_r.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663918149&t=51304ecefb44a5847249219c9d95fadc" mode="scaleToFill"></image>
					<view class="message">
						<view class="left">
							<span>{{item.ID}}</span>
							<span>{{item.message}}</span>
						</view>
						<view class="right">
							<view>{{item.time}}</view>
							<span>{{item.messageNum>99?'99+':item.messageNum}}</span>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
			<!-- 用户对话列表 -->
			<uni-swipe-action-item :right-options="options1" v-for="item,index in messageList"
			 :key="index" @click="bindClick2(item.ID,$event)">
				<view class="messageFrame" @click="toChatRoom(item.ID)">
					<image :src="item.profilePhoto" mode="scaleToFill"></image>
					<view class="message">
						<view class="left">
							<span>{{item.ID}}</span>
							<span>{{item.message}}</span>
						</view>
						<view class="right">
							<view>{{item.time}}</view>
							<span>{{item.messageNum>99?'99+':item.messageNum}}</span>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
			
		</uni-swipe-action>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList:[
					{
						profilePhoto:'/static/img/message/systemMessage@2x.png',
						ID:'众智互联',
						time:'2022.07.05',
						message:'我对此职位很感兴趣',
						messageNum:200,
					},
					{
						profilePhoto:'/static/img/message/systemMessage@2x.png',
						ID:'众智互联',
						time:'2022.07.05',
						message:'我对此职位很感兴趣',
						messageNum:200,
					},
					{
						profilePhoto:'/static/img/message/systemMessage@2x.png',
						ID:'众智互联',
						time:'2022.07.05',
						message:'我对此职位很感兴趣',
						messageNum:200,
					}
				],
				
				options1: [{
					text: '置顶',
					style: {
						backgroundColor: '#FFA858',
					}
				},{
					text:'删除',
					style:{
						backgroundColor:'#FF5F58'
					}
				}],
				options2: [{
					text: '取消置顶',
					style: {
						backgroundColor: '#99A3A3',
					}
				},{
					text:'删除',
					style:{
						backgroundColor:'#FF5F58'
					}
				}],
			}
		},
		methods: {
			toChatRoom(name){
				//前往聊天室
				let params={
					title:name
				}
				uni.navigateTo({
					url:'/subpageB/message/chatRoom?params='+JSON.stringify(params)
				})
			},
			toSystemMessage(){
				//前往系统通知
				uni.navigateTo({
					url:'/subpageB/message/systemMessage'
				})
			},
			bindClick1(ID,e){
				console.log('置顶列表：',ID,e.index);
			},
			bindClick2(ID,e){
				console.log('普通列表',ID,e.index);
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		padding: 1px 0;
		background-color: #FFFFFF;
		
		.messageFrame{
			width: 686rpx;
			padding: 0 32rpx 24rpx;
			display: flex;
			align-items: center;
			
			>image{
				width: 96rpx;
				height: 96rpx;
				border-radius: 48rpx;
				transform: translateY(12rpx);
			}
			
			.message{
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 24rpx;
				border-top: 1px solid #F5F5F5;
				
				.left{
					margin-left: 32rpx;
					>span{
						display: block;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #001A18;
					}
					>span:nth-of-type(2){
						margin-top: 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #505E5C;
					}
				}
				
				.right{
					text-align: right;
					>view{
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #505E5C;
					}
					>span{
						margin-top: 20rpx;
						display: inline-block;
						padding: 4rpx 16rpx;
						background: #FF5F58;
						border-radius: 40rpx;
						font-size: 20rpx;
						font-family: DIN-Medium, DIN;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
			
		}
		
		// .u-page {
		//         padding: 0;
		// }
		
		// .u-demo-block__title {
		// 	padding: 10px 0 2px 15px;
		// }
		
		// .swipe-action {
		// 	&__content {
		
		// 		&__text {
		// 			 font-size: 15px;
		// 			 color: $u-main-color;
		// 			 padding-left: 30rpx;
		// 		 }
		// 	}
		// }
		
	}
</style>
